<template>
  <el-dialog v-loading="loading" :title="title" width="400px" :append-to-body="true" @close="hiddenView"
    :visible.sync="showDialog">
    <div v-if="status == 1 && detail.config == 0" class="handle-type">
      <flexbox class="handle-item">
        <el-radio v-model="handleType" :label="1"><span></span></el-radio>
        <div @click.native="handleType = 1" style="font-size: 12px">审核结束</div>
      </flexbox>
      <flexbox class="handle-item" id="selectUser">
        <el-radio v-model="handleType" :label="2"><span></span></el-radio>
        <xh-user-cell class="select-user" placeholder="选择下一审批人" @focus="selectUserFocus"
          @value-change="selectExamineUser"></xh-user-cell>
      </flexbox>
    </div>
    <div v-if="status == 1 && detail.config == 0" class="title">意见</div>
    <el-input v-model="content" type="textarea" resize="none" :rows="5" :placeholder="placeholder"></el-input>
    <!-- <div v-if="status == 1 && detail.is_finance" style="margin-top: 10px;">
      <el-select v-model="calcuate">
        <el-option label="正常核算" value="1" />
        <el-option label="暂不核算" value="0" />
      </el-select>
    </div> -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClick('cancel')">取 消</el-button>
      <el-button type="primary" @click="handleClick('confirm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script type="text/javascript">
  import {
    crmContractCheck,
    crmContractRevokeCheck,
  } from "@/api/customermanagement/contract";
  import {
    crmReceivablesCheck,
    crmReceivablesRevokeCheck,
  } from "@/api/customermanagement/money";
  import {
    oaExamineCheck,
    oaExamineRevokeCheck
  } from "@/api/oamanagement/examine";
  import {
    XhUserCell
  } from "@/components/CreateCom";

  export default {
    name: "examine-handle", // 订单审核操作
    components: {
      XhUserCell,
    },
    computed: {
      title() {
        if (this.status == 1) {
          return "审批通过";
        } else if (this.status == 0) {
          return "审批拒绝";
        } else if (this.status == 2) {
          return "撤回审批";
        }
        return "";
      },
      placeholder() {
        // 1通过0拒绝2撤回
        if (this.status == 1) {
          return "请输入审批意见（选填）";
        } else if (this.status == 0) {
          return "请输入审批意见（必填）";
        } else if (this.status == 2) {
          return "请输入撤回理由（必填）";
        }
        return "";
      },
    },
    watch: {
      show: {
        handler(val) {
          this.showDialog = val;
        },
        deep: true,
        immediate: true,
      },
    },
    data() {
      return {
        loading: false,
        showDialog: false,
        handleType: 1,
        selectUsers: [],
        content: "", // 输入内容
        calcuate: "1",
      };
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      /** 操作类型  1通过0拒绝2撤回*/
      status: {
        type: [String, Number],
        default: 1,
      },
      // 详情信息id
      id: [String, Number],
      // 审核信息 config 1 固定 0 自选
      detail: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // crm_contract crm_receivables oa_examine
      examineType: {
        type: String,
        default: "",
      },
    },
    mounted() {},
    methods: {
      submitInfo() {
        if ((this.status == 0 || this.status == 2) && !this.content) {
          this.$message.error(this.placeholder);
        } else {
          if (this.status == 0 || this.status == 1) {
            // 1通过0拒绝2撤回
            this.handlePassAndReject();
          } else if (this.status == 2) {
            this.handleRevoke();
          }
        }
      },
      // 撤回操作
      handleRevoke() {
        this.loading = true;
        this.getExamineRevokeRequest()({
            id: this.id,
            content: this.content,
          })
          .then((res) => {
            this.loading = false;
            this.$message.success(res.data);
            this.$emit("save");
            this.hiddenView();
          })
          .catch(() => {
            this.loading = false;
          });
      },
      getExamineRevokeRequest() {
        if (this.examineType == "crm_contract") {
          return crmContractRevokeCheck;
        } else if (this.examineType == "crm_receivables") {
          return crmReceivablesRevokeCheck;
        } else if (this.examineType == "oa_examine") {
          return oaExamineRevokeCheck;
        }
      },
      // 通过 拒绝操作
      handlePassAndReject() {
        this.loading = true;
        var params = {
          id: this.id,
          status: this.status,
          content: this.content,
          flow_id: this.detail.flow_id,
          // calcuate: this.status == 1 && this.detail.is_finance ? this.calcuate : null
        };
        if (this.status == 1 && this.detail.config == 0) {
          if (this.handleType == 1) {
            params["is_end"] = 1;
          } else {
            params["check_user_id"] = this.selectUsers[0].id;
          }
        }
        this.getExamineRequest()(params)
          .then((res) => {
            this.loading = false;
            this.$message.success(res.data);
            this.$emit("save", {
              type: this.status
            });
            this.hiddenView();
          })
          .catch(() => {
            this.loading = false;
          });
      },
      getExamineRequest() {
        if (this.examineType == "crm_contract") {
          return crmContractCheck;
        } else if (this.examineType == "crm_receivables") {
          return crmReceivablesCheck;
        } else if (this.examineType == "oa_examine") {
          return oaExamineCheck;
        }
      },
      handleClick(type) {
        if (type == "cancel") {
          this.hiddenView();
        } else if (type == "confirm") {
          this.submitInfo();
        }
      },
      /** 选择了下一审批人 */
      selectUserFocus() {
        this.handleType = 2;
      },
      selectExamineUser(data) {
        this.selectUsers = data.value;
      },
      hiddenView() {
        this.$emit("close");
      },
    },
  };

</script>
<style lang="scss" scoped>
  .handle-type {
    padding-bottom: 8px;

    .handle-item {
      padding: 8px 0;
      cursor: pointer;
    }
  }

  .el-dialog__wrapper /deep/ .el-dialog__body {
    padding: 10px 25px 20px;
  }

  .el-radio-group /deep/ .el-radio+.el-radio {
    margin-left: 0px;
  }

  .select-user {
    flex: 1;
  }

  .title {
    font-size: 12px;
    padding-bottom: 8px;
    color: #666;
  }

</style>
